<template>
  <div class="p-[50px] pt-0 h-full overflow-hidden">
    <scroll-view scroll-y="true" class="scroll-Y w-full h-full" @scrolltolower="onScrollToLower">
      <view class="container pt-[30px]" >
        <view class="child-item h-[387px]" v-for="(item,index) in state.totalList"
              :key="item.name + '_' +index" @click="$emit('itemClick', item)">
          <view class="flex items-center w-full justify-center px-[10px] pt-[10px] flex-1">
            <img class="pic  w-[236px] h-[236px]" :src="item.cover" mode="aspectFit" />
          </view>
          <view class="info">{{ item.name }}</view>
          <image src="@/assets/images/seal-list-border.png" class="img-border"></image>
        </view>
      </view>
      <view class="loading text-[36px]" v-show="state.showMoreLoading">加载中…</view>
    </scroll-view>
  </div>
</template>

<script setup>
import {
  reactive,
  onMounted
} from 'vue';
import data from '@/static/data/model.json'
const state = reactive({
  totalList: [],
  showMoreLoading: false,
  pages: {
    page: 0,
    pageSize: 20
  },
  data: []
})

function getData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      state.totalList.push(...state.data.slice(state.pages.page * state.pages.pageSize, (state.pages
          .page + 1) * state.pages.pageSize))
      resolve()
    }, 500)
  })
}

onMounted(() => {
	uni.request({
		url:import.meta.env.VITE_APP_PREFIX +'/static/data/model.json',
		data: {
			time : new Date().getTime()
		},
		noCache: true
	}).then(res => {
		state.data = res.data.map(v => {
			return {
				...v,
				cover: import.meta.env.VITE_APP_PREFIX + v.cover,
				img: v.img.map(v => import.meta.env.VITE_APP_PREFIX + v)
			}
		})
	})
  getData()
})

/** @加载更多 **/
async function onScrollToLower() {
  if (state.showMoreLoading) return
  if (state.data.length == state.totalList.length) {
    state.showMoreLoading = false
    return
  }
  state.showMoreLoading = true
  state.pages.page++
  await getData()
  state.showMoreLoading = false
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.child-item {
  display: flex;
  flex-direction: column;
  width: calc((100% - 60px) / 3);
  position: relative;
  font-size: 0;
  border-radius: 10px;
  margin-bottom: 26px;
  overflow: hidden;
  transition: all ease 0.35s;
  background: #D2C5B2;
  border-radius: 12px;
  margin-right: 30px;

  &:nth-child(3n) {
    margin-right: 0;
  }


  .img-border {
    width: calc(100% - 28px);
    height: calc(100% - 30px);
    position: absolute;
    top: 15px;
    left: 14px;
    background-size: 100% 100%;
  }

  .info {
    padding: 0 41px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    height: 80px;
    font-size: 32px;
    line-height: 70px;
    color: #000000;
    background: #F7F2EA;
  }
}

.loading {
  padding: 20px;
  text-align: center;
  color: #aaa;
}
</style>
